<template>
  <header class="header-wrap">
    <nav class="content-wrap nav-wrap">
      <div class="logo" @click="goHome">
        <div class="logo-left"><i class="iconfont iconxiangji"></i></div>
        <div class="logo-right">
          <p>个人博客</p>
          <p>勤记录 懂分享</p>
        </div>
      </div>

      <el-menu
        :default-active="navIndex"
        class="el-menu-demo hidden-xs-only"
        text-color="#333333"
        active-text-color="#409EFF"
        mode="horizontal"
        :router="true"
        @select="selectMenu">
        <el-menu-item index="0" route="/home">
          <i class="el-icon-s-home"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-s-platform"></i>
            <span slot="title">WEB前端</span>
          </template>
          <el-menu-item index="1-0" route="/blogClassify/Vue">Vue</el-menu-item>
          <el-menu-item index="1-1" route="/blogClassify/JavaScript">JavaScript</el-menu-item>
          <el-menu-item index="1-2" route="/blogClassify/HTML5">HTML5</el-menu-item>
          <el-menu-item index="1-3" route="/blogClassify/CSS3">CSS3</el-menu-item>
          <el-menu-item index="1-4" route="/blogClassify/其它">其它</el-menu-item>
        </el-submenu>
        <el-menu-item index="2" route="/about">
          <i class="el-icon-user-solid"></i>
          <span slot="title">关于我</span>
        </el-menu-item>
        <el-menu-item index="3" route="/blogClassify/生活随笔">
          <i class="el-icon-camera-solid"></i>
          <span slot="title">生活随笔</span>
        </el-menu-item>
      </el-menu>

      <div class="menu-btn hidden-sm-and-up" :class="{'close-menu-btn':drawer}" @click="drawer = !drawer">
        <i></i>
        <i></i>
        <i></i>
      </div>
      <el-drawer
        title="导航栏"
        size="60%"
        :visible.sync="drawer"
        :append-to-body="true"
        :with-header="false">
        <div class="drawer-wrap">
          <el-menu
            :default-active="navIndex"
            class="el-menu-vertical-demo"
            :router="true"
            @select="selectMenu">
            <div v-for="(item,k) in navList" :key="k">
              <el-submenu :index="k+''" v-if="item.children && item.children.length > 0">
                <template slot="title">
                  <i :class="item.icon"></i>
                  <span slot="title">{{item.name}}</span>
                </template>
                <el-menu-item v-for="(item1,k1) in item.children" :key="k1" :index="k+'-'+k1" :route="item1.path">
                  {{item1.name}}
                </el-menu-item>
              </el-submenu>
              <el-menu-item :index="k+''" :route="item.path" v-else>
                <i :class="item.icon"></i>
                <span slot="title">{{item.name}}</span>
              </el-menu-item>
            </div>
          </el-menu>
        </div>
      </el-drawer>
    </nav>
  </header>

</template>

<script>
  import {mapState, mapMutations} from "vuex";

  export default {
    name: "headerVue",
    data() {
      return {
        navList: [
          {name: "首页", path: "/home", icon: 'el-icon-s-home'},
          {
            name: "WEB前端", path: "/web", icon: 'el-icon-s-platform', children: [
              {name: "Vue", path: "/blogClassify/Vue"},
              {name: "JavaScript", path: "/blogClassify/JavaScript"},
              {name: "HTML5", path: "/blogClassify/HTML5"},
              {name: "CSS3", path: "/blogClassify/CSS3"},
              {name: "其它", path: "/blogClassify/其它"},
            ]
          },
          {name: "关于我", path: "/about", icon: 'el-icon-user-solid'},
          {name: "生活随笔", path: "/blogClassify/生活随笔", icon: 'el-icon-camera-solid'},
        ],
        drawer: false,
      }
    },
    computed: {
      ...mapState(["navIndex"])
    },
    methods: {
      ...mapMutations(["setNavIndex"]),
      selectMenu(key) {
        this.drawer = false;
        this.setNavIndex(key);
      },
      goHome() {
        this.drawer = false;
        this.$router.push({name: "home"});
        this.setNavIndex("0");
      }
    }
  }
</script>

<style lang="less" scoped>
  .header-wrap {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    width: 100%;
    height: @height-header;
    background-color: @color-white;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);

    .nav-wrap {
      height: @height-header;
      display: flex;
      align-items: center;

      .logo {
        margin-right: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 130px;
        cursor: pointer;

        .logo-left {
          font-size: 35px;
          color: @color-blue;
          font-family: cursive;
          white-space: nowrap;
          letter-spacing: 3px
        }

        .logo-right {
          p:first-child {
            color: @color-blue;
            font-size: 18px;
            margin-bottom: 5px;
          }

          p:last-child {
            color: #CBCBCB;
            font-size: 12px;
          }
        }
      }
    }
  }

  .menu-btn {
    cursor: pointer;

    i {
      display: block;
      width: 24px;
      height: 3px;
      background-color: @color-blue;
      margin: 5px auto;
      transition: 0.2s ease-in-out;
    }
  }

  .close-menu-btn {
    i {
      &:nth-child(2) {
        opacity: 0;
      }

      &:nth-child(1) {
        transform: translateY(8px) rotate(-45deg);
      }

      &:nth-child(3) {
        transform: translateY(-8px) rotate(45deg);
      }
    }
  }

  .drawer-wrap {
    padding-top: 60px;
  }

  @media screen and (max-width: 767px) {
    .header-wrap {
      .nav-wrap {
        justify-content: space-between;
      }
    }
  }
</style>
<style lang="less">
  .is-active {
    .el-icon-s-platform {
      color: @color-blue;
    }
  }
</style>
